import React, { useState } from 'react';
import {
  Space,
  Typography,
  Card,
  RadioGroup,
  Radio,
  Tag
} from 'tdesign-react';
import EnglishTypingPractice from '../components/typing/EnglishTypingPractice';
import { themeColors, spacing, borderRadius } from '../theme/theme';

const { Text, Title } = Typography;

type Difficulty = 'easy' | 'medium' | 'hard';

const EnglishPracticeView: React.FC = () => {
  const [difficulty, setDifficulty] = useState<Difficulty>('easy');

  const handleDifficultyChange = (value: any) => {
     setDifficulty(value as Difficulty);
   };

  const difficultyInfo = {
    easy: {
      title: '基础指法',
      description: '单个手指训练，建立正确手位',
      features: ['重复按键', '基础手位', '无大写', '准确性优先'],
      goals: '目标：掌握基本指法，准确率>95%',
      color: themeColors.success
    },
    medium: {
      title: '进阶练习',
      description: '加入大写字母和完整句子',
      features: ['大写字母', '标点符号', '完整句子', '节奏训练'],
      goals: '目标：流畅输入，速度15-25WPM',
      color: themeColors.warning
    },
    hard: {
      title: '速度挑战',
      description: '追求高速度的专业级训练',
      features: ['复杂文本', '专业词汇', '长篇内容', '速度冲刺'],
      goals: '目标：专业水平，速度>30WPM',
      color: themeColors.error
    }
  };

  const backgroundStyle: React.CSSProperties = {
    minHeight: '100vh',
    background: `linear-gradient(135deg, ${themeColors.primary} 0%, ${themeColors.primaryHover} 100%)`,
    padding: '1.25rem 0 5rem 0',
    width: '100%',
    boxSizing: 'border-box'
  };

  const mainContainerStyle: React.CSSProperties = {
    width: '100%',
    margin: '0 auto',
    padding: '0 1rem'
  };

  const headerSectionStyle: React.CSSProperties = {
    textAlign: 'center',
    marginBottom: spacing.xl
  };

  const difficultySelectorStyle: React.CSSProperties = {
    marginBottom: spacing.xl,
    borderRadius: borderRadius.large,
    background: 'rgba(255, 255, 255, 0.95)',
    backdropFilter: 'blur(10px)',
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
    border: '1px solid rgba(255, 255, 255, 0.2)'
  };

  const infoCardStyle: React.CSSProperties = {
    marginTop: spacing.l,
    borderRadius: borderRadius.large,
    background: 'rgba(255, 255, 255, 0.98)',
    backdropFilter: 'blur(12px)',
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.08)',
    border: `3px solid ${difficultyInfo[difficulty].color}`,
    transition: 'all 0.3s ease'
  };

  const tipChipStyle: React.CSSProperties = {
    backgroundColor: 'rgba(255, 255, 255, 0.15)',
    borderRadius: borderRadius.large,
    padding: '10px 18px',
    color: '#fff',
    fontSize: '0.9rem',
    fontWeight: '500',
    backdropFilter: 'blur(8px)',
    border: '1px solid rgba(255, 255, 255, 0.2)',
    transition: 'all 0.3s ease',
    cursor: 'pointer',
    display: 'inline-block',
    margin: '4px'
  };

  const radioOptions = [
    { label: '🟢 基础指法', value: 'easy' },
    { label: '🟡 进阶练习', value: 'medium' },
    { label: '🔴 速度挑战', value: 'hard' }
  ];

  const getTips = (difficulty: Difficulty) => {
    switch (difficulty) {
      case 'easy':
        return [
          '🖐️ 建立正确手位：左手asdf，右手jkl;',
          '🎯 重复练习单个手指',
          '🐌 慢速输入，追求准确'
        ];
      case 'medium':
        return [
          '⬆️ 学习使用Shift键',
          '📝 练习标点符号',
          '🎼 保持输入节奏'
        ];
      case 'hard':
        return [
          '🚀 追求打字速度',
          '👀 不看键盘盲打',
          '💪 挑战复杂文本'
        ];
      default:
        return [];
    }
  };

  return (
    <div style={backgroundStyle}>
      <div style={mainContainerStyle}>
        <div style={headerSectionStyle}>
          <Title 
            level="h1"
            style={{
              color: '#fff',
              fontWeight: '700',
              textShadow: '2px 2px 8px rgba(0,0,0,0.3)',
              marginBottom: spacing.xl,
              fontSize: '3rem',
              letterSpacing: '-0.02em'
            }}
          >
            🚀 英文打字训练营
          </Title>
          
          <div style={{ display: 'flex', flexDirection: 'column', gap: spacing.xl, alignItems: 'center' }}>
            <div style={{ width: '100%', maxWidth: '800px' }}>
              <Card style={difficultySelectorStyle}>
                <div style={{ padding: spacing.xl }}>
                  <Title 
                    level="h4"
                    style={{
                      marginBottom: spacing.xl,
                      fontWeight: '600',
                      textAlign: 'center',
                      color: '#333'
                    }}
                  >
                    选择练习难度
                  </Title>
                  
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: spacing.l }}>
                    <RadioGroup
                      value={difficulty}
                      onChange={handleDifficultyChange}
                      options={radioOptions}
                      variant="default-filled"
                      style={{
                        display: 'flex',
                        flexDirection: 'row',
                        gap: spacing.l,
                        flexWrap: 'wrap',
                        justifyContent: 'center'
                      }}
                    />
                  </div>
              
                  <Card style={infoCardStyle}>
                    <div style={{ padding: spacing.l }}>
                      <Title 
                        level="h6"
                        style={{
                          color: difficultyInfo[difficulty].color,
                          fontWeight: '600',
                          textAlign: 'center',
                          marginBottom: spacing.m
                        }}
                      >
                        {difficultyInfo[difficulty].title}模式
                      </Title>
                      <Text 
                        style={{
                          textAlign: 'center',
                          fontSize: '1.1rem',
                          marginBottom: spacing.l,
                          display: 'block'
                        }}
                      >
                        {difficultyInfo[difficulty].description}
                      </Text>
                      
                      <Space 
                        direction="horizontal"
                        size="small"
                        style={{
                          justifyContent: 'center',
                          marginBottom: spacing.l,
                          flexWrap: 'wrap'
                        }}
                      >
                        {difficultyInfo[difficulty].features.map((feature, index) => (
                          <Tag
                            key={index}
                            theme="primary"
                            variant="outline"
                            style={{
                              backgroundColor: `${difficultyInfo[difficulty].color}20`,
                              color: difficultyInfo[difficulty].color,
                              borderColor: difficultyInfo[difficulty].color,
                              fontWeight: '600',
                              padding: '8px 16px',
                              borderRadius: borderRadius.large
                            }}
                          >
                            {feature}
                          </Tag>
                        ))}
                      </Space>
                      
                      <div
                        style={{
                          color: difficultyInfo[difficulty].color,
                          fontWeight: '600',
                          fontSize: '1.1rem',
                          textAlign: 'center',
                          backgroundColor: `${difficultyInfo[difficulty].color}15`,
                          padding: '16px 24px',
                          borderRadius: borderRadius.medium,
                          border: `2px solid ${difficultyInfo[difficulty].color}60`
                        }}
                      >
                        {difficultyInfo[difficulty].goals}
                      </div>
                    </div>
                  </Card>
                </div>
              </Card>
            </div>
            
            <div style={{ width: '100%', maxWidth: '600px' }}>
              <Title 
                level="h6"
                style={{
                  color: '#fff',
                  marginBottom: spacing.m,
                  textAlign: 'center',
                  fontWeight: '600'
                }}
              >
                💡 练习建议
              </Title>
              <div style={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: spacing.xs }}>
                {getTips(difficulty).map((tip, index) => (
                  <div
                    key={index}
                    style={tipChipStyle}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
                      e.currentTarget.style.transform = 'translateY(-2px)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
                      e.currentTarget.style.transform = 'translateY(0)';
                    }}
                  >
                    {tip}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: spacing.xl }}>
          <EnglishTypingPractice difficulty={difficulty} />
        </div>
      </div>
    </div>
  );
};

export default EnglishPracticeView;